<div class="row lined">
  <div class="span10"><h2>Create Game</h2></div>
</div>
<div class="row not-lined hide">
  <div class="span2">Game Name</div>
  <div class="span7">
   <input type="text" id="game_name" name="game_name">
  </div>
</div>
<div class="row not-lined">
  <div class="span2">Game Type</div>
  <div class="span7">
   <select name="game_type" class="game_option">
	   <option value="single_player" selected="selected">Single Player</option>
	   <option value="public">Public</option>
<!-- 	   <option value="friends_only">Friends Only</option> -->
<!-- 	   <option value="private">Private</option> -->
   </select>
  </div>
</div>
<div class="row not-lined hide">
  <div class="span2">Number of Players</div>
  <div class="span7">
   <select name="max_players" class="game_option">
     <option value="6">6</option>
     <option value="5">5</option>
     <option value="4">4</option>
     <option value="3">3</option>
     <option value="2">2</option>
   </select>
  </div>
</div>
<div class="row lined">
 <div class="span2">Game Difficulty</div>
 <div class="span7">
  <select name="game_level" class="game_option">
    <option value="easy">Easy</option>
<!--     <option value="medium">Medium</option> -->
<!--     <option value="hard">Hard</option> -->
  </select>
 </div>
</div>
<div class="row not-lined">
 <div class="span10">
   <a id="create_game_btn" class="btn btn-primary">Create New Game&nbsp<i class="icon-plus icon-white"></i></a>
 </div>
</div>
<script>
  $(document).ready(function(){
	  $("#create_game_btn").click(function(){
		  var metadata = Array();
		  $(".game_option").each(function(i, object){
			  metadata.push($(object).attr("name") + ":" + $(object).val());
		  });
		  $.post("/createGame/", {
			  'game_name': $("#game_name").val(),
			  'metadata': metadata
			})
			.success(function(){
				location.reload();
			})
			.error(function(){
				alert("Error creating game. Please try again");
			});
	  });
  });
</script>